import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Spin } from 'antd';
import { doFetch } from '@/utils/doFetch';

export default () => {
  let frame = useRef();
  const [spining, setspining] = useState(true),
    [token, settoken] = useState('');


  useEffect(() => {
    setTimeout(() => {
      setspining(false);
    }, 2000);
    doFetch({
      url: "/vehicle-node/charge", params: {
        "user_name": "18016268990",
        "password": "asdf1234",
        "client_name": "password",
      }
    }).then((res) => {
      if (res.code == 0) {
        settoken(res?.data?.access_token);
      }
    });
    return;
  }, [frame]);
  console.log(token);

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      {spining && (
        <div
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 999,
            backgroundImage: `url(${require('@/assets/bac.jpg')})`,
          }}
          className="center"
        >
          <Spin spinning={spining} />
        </div>
      )}
      {
        token && <iframe
          src={`https://www.ucyber.cn/autologin?token=${token}&redirect_url=https://www.ucyber.cn/shidianu`}
          id="isd"
          ref={frame}
          frameBorder="0"
          scrolling="no"
          style={{ width: '100%', height: 'calc(100% + 74px)', position: 'absolute', top: -74 }}
        />
      }

    </div>
  );
};
